<template>
  <div style="height: 100%;">
    <div class="box">
      <span @click="handleBack" class="iconfont box__back">&#xe679;</span>
      <span class="iconfont box__icon">&#xe6e1;</span>
      <input
        class="box__search"
        placeholder="山姆会员商店优惠商品"
        type="text"
        name=""
        id=""
      />
    </div>
    <div style="margin-left: 20px;margin-top: 20px;">
        <shopInfoVue :isRouter="0" :item="item"></shopInfoVue>
    </div>
    <ShopInfoContent></ShopInfoContent>
    <Cart></Cart>

  </div>
</template>
<script>
import { useRoute,useRouter } from "vue-router";
import { reactive, toRefs } from 'vue'
import {get} from '../utils/request'
import shopInfoVue from "@/views/Home/components/shopInfo.vue";
import ShopInfoContent from './ShopInfoContent'
import Cart from './Cart'

// 点击回退逻辑
const useRouterEffect = () =>{
    const router = useRouter();// 大的路由信息
    const handleBack = ()=>{
        router.back();
    }
    return handleBack;
}
// 获取搜索框下方商铺信息
const getShopInfoEffect = ()=>{
    const data = reactive({ item:{} });
    const router = useRoute();//获取当前路由信息
    const getItemInfo = async ()=>{
        const result = await get(`api/shop/${router.params.id}`)
        if(result?.errno === 0 && result?.data){
            data.item = result.data
        }
    }
    const { item } = toRefs(data);
    return {item, getItemInfo}
}

export default {
  components: {
      shopInfoVue,
      ShopInfoContent,
      Cart,
  },
  setup() {
      const handleBack  = useRouterEffect();
      const {item, getItemInfo} = getShopInfoEffect();
      getItemInfo();
      return {handleBack,item};
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin-left: 47px;
  margin-top: 16px;
  position: relative;
  color: #b7b7b7;
  &__search {
    box-sizing: border-box;
    padding-left: 38px;
    border-radius: 16px;
    background-color: #f5f5f5;
    border: none;
    width: 305px;
    height: 32px;
  }
  &__icon {
    font-size: 22px;
    position: absolute;
    left: 16px;
    top: 6px;
  }
  &__back {
    position: absolute;
    left: -32px;
    top: 5px;
    font-size: 20px;
    font-weight: bold;
  }
}

</style>
